<template>
	<view>
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
		<view class="sticky-tabs bg">
			<view class="flex ">
				<view class="flex-sub text-center text-lg text-bold" v-for="(item,index) in tab" :kei="index"
					:class="index==orderIndex?'active':''" @click="tabTitle(index)">{{item.name}}</view>
			</view>
			<view style="width: 100%;padding-top: 1upx;">
				<me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
		</view>


		<!-- 数据列表 -->
		<view v-if="orderIndex==0">
			<view class="margin-lr-sm margin-top-16 padding-sm bg radius" v-for="(item,index) in goods" :key='index'
				@click="bindtakeDetail(item.ordersId)">
				<view class="flex justify-between">
					<view class="text-blue">{{item.statusName}}</view>
					<view class="text-white">{{item.createTime}}</view>
				</view>
				<view class=" flex u-p-t-30">
					<view class="u-m-r-10">
						<image :src="item.homepageImg" style="width: 140rpx;height: 140rpx;" mode="aspectFill"></image>
					</view>
					<view class="u-flex-1 text-white margin-left-xs">
						<view class="text-30  text-bold u-line-1" style="width: 500rpx;">{{item.myLevel}}</view>
						<!-- <view class="u-font-16  text-bold">标题</view> -->

						<view class="u-font-14 margin-top-xs u-tips-color flex justify-between">
							<view class="text-white">
								<view style="display: inline-flex;">
									<view class="margin-top-xs text-white text-df"
										v-for="(item,index) in item.gameName " :key="index"
										style="margin-right: 10rpx;">{{item}}</view>
								</view>
							</view>
						</view>
						<view class="margin-top-xs">预约时间：{{item.startTime}}</view>
						<view class="text-white text-right margin-top-sm">
							实收: <text class="text-lg">{{item.oldMoney*item.orderNumber}}元</text>
						</view>
					</view>
				</view>
				<view class="margin-top-sm" v-if="item.remarks">
					备注：<text class="text-red">{{item.remarks}}</text>
				</view>
				<view class="flex justify-end u-p-t-20">
					<!-- 		<u-button :custom-style="customStyle" shape="circle" :plain="true" v-if="item.state==4"
						@click.stop="bindtakeDetail(item.ordersId)">转派单</u-button> -->
					<u-button :custom-style="customStyle" shape="circle" :plain="true" v-if="item.state==2"
						@click.stop="bindtakeDetail(item.ordersId)">查看详情</u-button>
					<u-button v-if="item.state == 4" :custom-style="customStyle" shape="circle" :plain="true"
						@click="bindtakeDetail(item.ordersId)">开始服务</u-button>
					<u-button v-if="item.state == 1" :custom-style="customStyle" shape="circle" :plain="true"
						@click="bindtakeDetail(item.ordersId)">完成服务</u-button>
				</view>
			</view>
		</view>
		<view v-if="orderIndex==1">
			<view v-for="(item,index) in goods" :key='index' @click="bindtakeDetail(item.helpOrderId)">
				<view class="bg margin-lr radius margin-top-sm">
					<view class="flex justify-between padding-lr padding-top-sm">
						<view>{{item.createTime}}</view>
						<view style="color: #557EFD;" v-if="item.status == 1">待服务</view>
						<view style="color: #557EFD;" v-if="item.status == 2">进行中</view>
						<view style="color: #557EFD;" v-if="item.status == 3">已完成</view>
						<view style="color: #557EFD;" v-if="item.status == 4">已取消</view>
					</view>
					<view style="border-top: 1rpx solid #F2F2F2;margin-top: 20upx;"></view>
					<view class="flex padding-lr padding-tb-sm">
						<image :src="item.img" style="width: 149upx;height: 149upx;"></image>
						<view class="margin-left-xs">
							<view class="flex justify-between text-lg text-bold  " style="width:480upx;">
								<view>{{item.classifyName}}</view>
								<view style="color: #557EFD;" v-if="item.task_type==1">悬赏￥{{item.money}}</view>
								<view style="color: #557EFD;" v-if="item.task_type==2">报价￥{{item.money}}</view>
								<view style="color: #557EFD;" v-if="item.task_type==3">一口价￥{{item.money}}</view>
							</view>
							<view class="flex text-sm margin-tb-xs" style="color: #999999;">服务地址：<view>
									{{item.detailsAddress}}
								</view>
							</view>
							<view class="flex text-sm " style="color: #999999;">预约时间：<view>
									{{item.deliveryTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="margin-top-sm margin-lr" v-if="item.remarks">
						备注：<text class="text-red">{{item.remarks}}</text>
					</view>
					<view style="border-top: 1rpx solid #F2F2F2;margin-top: 30upx;" v-if="item.status !=3"></view>
					<view class="flex justify-end padding-lr padding-tb-sm align-center">
						<!-- <view class="flex align-center" style="color: #999999;">
									赏金:<text class="text-bold text-lg" style="color: #000000;">￥{{item.money}}</text>
								</view> -->
						<view class="flex">
							<!-- <view class="btn2" @click.stop="bindtakeDetail(item.helpOrderId)" v-if="item.status ==1">转派单
							</view> -->
							<view class="btn2" @click.stop="bindtakeDetail(item.helpOrderId)" v-if="item.status ==2">
								查看详情</view>
							<view class="btn2" @click.stop="bindtakeDetail(item.helpOrderId)" v-if="item.status ==2">
								完成服务
							</view>
							<view class="btn2" @click.stop="bindtakeDetail(item.helpOrderId)" v-if="item.status ==1">
								开始服务
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="goods.length == 0&&orderIndex==0"></empty>
		<empty v-if="goods.length == 0&&orderIndex==1"></empty>
		<!-- 确认码弹框 -->
		<view class="boxtk" v-if="reverTrue">
			<view class="whitebox padding">
				<view class="flex justify-between align-center ">
					<view style="font-size:38upx;color:#333333" class="text-bold">确认码</view>
					<view @click="bindclose(1)">
						<image src="/static/images/msg/close.png" style="width:44upx;height:44upx;"></image>
					</view>
				</view>
				<view style="margin-top:59upx;">
					<input placeholder="请输入确认码" name="input" maxlength="10" v-model="codeNum" type="number"
						style="background: #F2F2F2;height:100upx;padding:30upx"></input>
				</view>
				<view class="btn" @click="cancelOrder(goods[codeIndex],2)">确定</view>
			</view>
		</view>

		<!-- <u-picker v-model="showtime" mode="time" @confirm="confirm"></u-picker> -->
	</view>
</template>

<script>
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'
	export default {
		components: {
			meTabs,
			empty
		},
		data() {
			return {
				codeNum: '',
				codeIndex: 0,
				reverTrue: false,
				goods: [], // 数据列表
				tabs: [{
						title: '全部',
						status: ''
					}, {
						title: '待服务',
						status: '4'
					}, {
						title: '进行中',
						status: '1'
					}, {
						title: '已完成',
						status: '2'
					},
					{
						title: '已退款',
						status: '3'
					}
				],
				tabIndex: 0, // tab下标
				game: [],
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#fff',
					// border: '2rpx solid #557EFD',
					backgroundColor: '#557EFD',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#557EFD',
					border: '4rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				count: '',
				tab: [{
					id: 1,
					name: '服务订单'
				}, {
					id: 2,
					name: '任务订单',
				}],
				orderIndex: 0,
				companyId: ''
			}
		},
		onLoad(option) {
			if (option.companyId) {
				this.companyId = option.companyId
				this.getOrderlist()
			} else {
				this.getOrderlist()
			}
			this.$queue.showLoading("加载中...");
			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName')

		},
		onShow() {

		},
		methods: {
			tabTitle(index) {
				this.orderIndex = index
				this.tabIndex = 0
				this.page = 1
				this.getOrderlist()
			},
			confirm(e) {
				this.startTime = e.year + '-' + e.month + ' ' + e.day
			},
			updete() {
				let that = this
				if (!that.showtime) {
					uni.showToast({
						title: '请选择时间',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定修改订单信息？',
					success: function(res) {
						if (res.confirm) {
							that.showData = false
							let data = {
								ordersId: that.updeOrderTd,
								startTime: that.startTime,
								remarks: that.remark
							}
							that.$Request.post('/app/orders/updateStartTime', data).then(res => {
								if (res.code == 0) {

									this.page = 1
									that.getOrderlist()
									this.startTime = ''
									this.remark = ''
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						}
					},
				})

			},
			bindclose(index) {

				if (index == 1) {
					this.reverTrue = false
				} else if (index == 2) {
					this.showData = false
				}
				console.log(index, '关闭弹框', this.showData)
			},

			// 接单详情
			bindtakeDetail(e) {
				console.log(e)
				let id = e
				if (this.orderIndex == 0) {
					uni.navigateTo({
						url: '/my/order/pay?id=' + id
					})
				} else if (this.orderIndex == 1) {
					uni.navigateTo({
						url: '/my/takeOrder/takeDetail?id=' + id
					})
				}

			},
			getOrderlist() {
				if (this.orderIndex == 0) {
					let curTab = this.tabs[this.tabIndex].status

					let data = {
						status: curTab,
						page: this.page,
						limit: this.limit,
					}
					this.$Request.get('/app/orders/selectStaffUserOrders', data).then(res => {
						uni.hideLoading();
						if (this.page == 1) this.goods = []; //如果是第一页需手动制空列表
						res.data.list.forEach(ret => {
							switch (ret.state) {
								case 0:
									ret.statusName = '待接单'
									break;
								case 1:
									ret.statusName = '进行中'
									break;
								case 2:
									ret.statusName = '已完成'
									break;
								case 3:
									ret.statusName = '已拒绝'
									break;
								case 4:
									ret.statusName = '待服务'
									break;
							}
						})
						this.goods = [...this.goods, ...res.data.list]; //追加新数据
						this.count = res.data.totalCount
						for (let i = 0; i < this.goods.length; i++) {
							this.goods[i].gameName = this.goods[i].gameName.split(",");

						}
					})
				} else {
					let curTab = this.tabs[this.tabIndex].status
					let data = {
						status: curTab,
						page: this.page,
						limit: this.limit,
						startTime: this.time,
						ordersNo: this.orderNo,
						phone: this.phone,
						// name: this.userName
					}
					this.$Request.get('/app/help/selectRunHelpOrder', data).then(res => {
						uni.hideLoading();
						if (this.page == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods = [...this.goods, ...res.data.list]; //追加新数据

					})
				}

			},
			// 切换菜单
			tabChange() {
				this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getOrderlist()
			},
			// 取消订单
			cancelOrder(e, status) {
				let that = this
				if (that.codeNum.length < 3) {
					uni.showToast({
						title: '请填写收货码（不少于四位数）',
						duration: 1000,
						icon: 'none'
					});
					return
				}
				let content = ''
				if (status == 3) {
					content = '确定拒绝接单吗？'
				} else if (status == 2) {
					content = '确定订单已经完成吗？如果未完成，客户投诉将采取封号处理'
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.ordersId,
								code: that.codeNum,
								status
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {
									that.reverTrue = false
									that.getOrderlist()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						}
					},
				})

			},
			//
			clickItem: function(options) {
				let data = {
					userId: this.userId,
					focusedUserId: options.ordersUserId,
					userType: 3
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						// console.log(options.userName,'--------')
						// return
						let id = this.userId == res.data.userId ? res.data.focusedUserId : this.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id + '&teamName=' + options.userName
						})
					}
				})
			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			}
		},
		onReachBottom: function() {
			if (this.count = this.goods.length) {
				uni.showToast({
					title: '到底了~',
					icon: 'none'
				})
			} else {
				this.page = this.page + 1;
				this.getOrderlist()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getOrderlist()
		},
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	.boxtk {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.whiteboxs {
		// width: 461upx;
		// height: 563upx;
		text-align: -webkit-center;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 185px;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.whitebox {
		width: 550upx;
		height: 440upx;
		background: #FFFFFF;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 450upx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.btn {
		width: 400upx;
		height: 88upx;
		background: #557EFD;
		// box-shadow: 0upx 10upx 20upx 0upx #FFD9B3;
		border-radius: 16upx;
		margin: 0 auto;
		color: #fff;
		text-align: center;
		line-height: 88upx;
		margin-top: 43upx;
	}

	.active {
		color: #557EFD;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: flex-end;
		height: 127rpx;
	}

	.box {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.2);

		/* opacity: 0.2; */
		position: absolute;
		bottom: 0px;
		z-index: 9
	}

	.popbox1 {
		width: 749upx;
		/* height: 764upx; */
		background: #FFFFFF;
		padding-bottom: 72rpx;
		z-inde: 9;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		bottom: 0upx;
		/* #endif */
		/* #ifndef H5 */
		bottom: 0rpx;
		/* #endif */
		border-radius: 24upx 24upx 0upx 0upx;
	}

	.popbox {
		width: 749upx;
		/* height: 764upx; */
		background: #FFFFFF;
		padding-bottom: 72rpx;
		z-inde: 99;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		top: 160upx;
		/* #endif */
		/* #ifndef H5 */
		top: 0rpx;
		/* #endif */

	}

	.impute {
		background: #F2F2F2;
		height: 80rpx;
		margin: 20rpx 0;
	}

	.btns {
		width: 690upx;
		height: 88upx;
		color: #FFFFFF;
		background: #5E81F9;
		box-shadow: 0upx 10upx 20upx 0upx #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin: 0 auto;
	}

	.shax {
		width: 15%;
		background: #FFFFFF;
		box-shadow: 0px -12px 10px 12px #D9D9D9;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		// box-shadow: 0upx 0upx 20upx 30upx #FFD9B3;
		// height: 80upx;
		// line-height: 60upx;

	}

	.btn1 {
		background: #FFFFFF;
		color: #5E81F9;
		border: 4rpx solid #5E81F9;
		padding: 10upx 25upx;
		border-radius: 40upx;
		margin-right: 20upx;
		// border: 1upx solid #666666;
	}

	.btn2 {
		background: #5E81F9;
		color: #FFFFFF;
		padding: 10upx 25upx;
		border-radius: 40upx;
		margin-left: 20upx;
	}
</style>
